import QtQuick 2.15
import QtCharts 2.15
import QtQuick.Controls 2.15
import S401Modell 1.0
import SensorList 1.0
import SensorModel 1.0

Item {
    ChartView {
        id: chartView
        anchors.fill: parent


        Component.onCompleted: {
            chartView.axisY().min = 0;
            chartView.axisY().max = 10;
            chartView.axisY().tickCount = 6;
            chartView.axisX().tickCount = 6;
            chartView.axisY().titleText = "xxx";
            chartView.axisX().titleText = "xxxx";
            chartView.axisX().labelFormat = "%.0f";
//            console.log(snmod)
        }

        SensorList{
            id:sensl
        }
//        SensorModel{
//            id:snmod
//        }

        Rectangle{
            visible: false
            color: "red"
            x:100
            y:100
            width: 500
            height: 500
            Column{
                Repeater{
                    id:rep
                    model:sensl.getSensorCount();
                    delegate: ListView{
                        model:sensl.getSensor(index)
                        height: 100
                        width: 100
                        delegate: Text{
                            height: 30
                            width: 100
                            id: titleText
                            text: name+" --- "+value
                            font.pixelSize: 18
                            x: 20
                        }
                    }
                }
            }
        }

        PinchArea{
            anchors.fill: parent
            pinch.maximumScale: 10
            pinch.minimumScale: 0.2
            onPinchStarted: {
                pinch.accepted = true;
            }
            onPinchUpdated: {
                chartView.zoom(pinch.scale)
            }
        }

        Rectangle{
            id:selectR
            color:"#00000000"
            x:0
            y:0
            width: 0
            height: 0
            visible: toucharea.ispressed
            border.width: 2
            border.color: "blue"
        }


        MultiPointTouchArea{
            id:toucharea
            property bool ispressed: false
            property real mxscare: 1
            property real myscare: 1
            property real mscare: 1
            anchors.fill: parent
            mouseEnabled :  true
            maximumTouchPoints :  1
            minimumTouchPoints :  1
            touchPoints : [
                TouchPoint
                {
                    id : point1
                }
            ]
            onPressed: {
                ispressed = true
                selectR.x = point1.x
                selectR.y = point1.y
            }
            onUpdated: {
                if(ispressed === true){
                    selectR.width = point1.x - selectR.x
                    selectR.height = point1.y - selectR.y
                }
            }
            onReleased: {
                mscare = zoombtn.checked
                          ?parent.width/selectR.width
                          :selectR.width/parent.width
                chartView.zoom(mscare)
                chartView.axisY().max = (chartView.axisY().max * mscare)


                console.log(chartView.x,
                            chartView.y,
                            chartView.x+chartView.width,
                            chartView.y+chartView.height
                            )
                console.log(point1.x,point1.y)


                ispressed = false
                selectR.x=0
                selectR.y=0
                selectR.width= 0
                selectR.height= 0
            }
        }

        Button{
            id:zoombtn
            checkable: true
            checked: false
            width: 100
            height: 30
            text: "zoomIn"
            visible: false

            onCheckedChanged: {
                zoombtn.text = checked?"zoomIn":"zoomOut"
                console.log(checked)
            }
        }

        LineSeries {
            name: "Flow"
            XYPoint {
                x: 0
                y: 2
            }

            XYPoint {
                x: 1
                y: 1.2
            }

            XYPoint {
                x: 2
                y: 3.3
            }

            XYPoint {
                x: 5
                y: 2.1
            }
        }

        LineSeries {
            name: "Velocity"
            XYPoint {
                x: 0
                y: 0
            }

            XYPoint {
                x: 1
                y: 5
            }

            XYPoint {
                x: 2
                y: 8
            }

            XYPoint {
                x: 5
                y: 2.1
            }
        }

    }

}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
##^##*/
